<!DOCTYPE html>
<html>
  <head>
    <title>Hyper-Link DescribedBy JSON Editor Example</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <!-- Enable responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

  <!-- Bootstrap4 -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <!-- fontawesome5 -->
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'>
  
  <!-- JSON-Editor -->
  <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>

  <style type="text/css">
  body {
    margin: 1em;
  }

  </style>
  </head>
  <body>
    <h1>Hyper-Link DescribedBy JSON Editor Example</h1>

    <div id='editor_holder'></div>
    <button id='submit'>Submit (console.log)</button>

    <script>

      // Initialize the editor
      var editor = new JSONEditor(document.getElementById("editor_holder"), {
        theme: "bootstrap4",
        iconlib: "fontawesome5",
        disable_collapse: true,
        disable_edit_json: true,
        disable_properties: true,
        //no_additional_properties: true,
        schema: {
          "title": "Property for Sale",
          "$ref": "#/definitions/single",
          "definitions": {
            "multiple": {
              "type": "array",
              "items": {
                "$ref": "#/definitions/single"
              }
            },
            "single": {
              "id": "basic",
              "type": "object",
              "properties": {
                "propertyName": {
                  "type": "string",
                  "title": "Property Name",
                  "description": "The name of the property being sold",
                  "minLength": 5
                },
                "propertyType": {
                  "type": "string",
                  "title": "Property Type",
                  "enum": ["house", "car", "yacht","multiple"]
                },
                "propertyTypeOptions": {
                  "type": ["object","array"],
                  "title": "Property Options",
                  "watch": {
                    "tag": "basic.propertyType"
                  },
                  "links": [{
                    "rel": "describedBy",
                    "href": "#/definitions/{{tag}}"
                  }]
                }
              },
              "required": ["propertyName","propertyType"],
            },
            "house": {
              "properties": {
                "address": {
                  "type": "string",
                  "title": "Address"
                },
                "rooms": {
                  "type": "integer",
                  "title": "Number Of Rooms"
                }
              }
            },
            "car": {
              "properties": {
                "brand": {
                  "type": "string",
                  "title": "Brand",
                  "enum": ["Audi", "BMW", "Chevrolet", "Opel", "Mitsubishi"]
                },
                "color": {
                  "type": "string",
                  "title": "Color",
                  "format": "color"
                },
                "year": {
                  "type": "string",
                  "title": "Build Year"
                }
              }
            },
            "yacht": {
              "properties": {
                "name": {
                  "type": "string",
                  "title": "Name"
                },
                "model": {
                  "type": "string",
                  "title": "Model"
                },
                "year": {
                  "type": "integer",
                  "title": "Year"
                },
                "yachtLength": {
                  "type": "integer",
                  "title": "Length"
                }
              }
            }
          }
        }
      });

      function validate() {
          var errors = editor.validate();
          console.log(editor.getValue());
          if(errors.length) {
            // errors is an array of objects, each with a `path`, `property`, and `message` parameter
            // `property` is the schema keyword that triggered the validation error (e.g. "minLength")
            // `path` is a dot separated path into the JSON object (e.g. "root.path.to.field")
            editor.root.showValidationErrors(errors);
            console.log('ERRORS', errors);
          }
          else {
            // It's valid!
            console.log("OK");
          }
      }

      // Hook up the submit button to log to the console
      document.getElementById('submit').addEventListener('click',function() {
        // Get the value from the editor
        validate();
      });
    </script>
  </body>
</html>
